<template>
  <div class="container">
    <div class="imgBox">
      <h1>
        <span>实验项目教学负责人</span>
      </h1>
      <ul>
        <li>
          <img src="../assets/images/libin.jpg" alt />
          <div>
            <p>
              李斌
              &nbsp;
              <span title="副教授">副教授</span>
            </p>
            <div class="teacher_detail">
              <router-link :to="'/teachers/principal'+'#1'">查看介绍</router-link>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="imgList">
      <h1>
        <span>教学服务团队</span>
      </h1>
      <ul>
        <li>
          <img src="../assets/images/libin.jpg" alt />
          <div>
            <p class="t_first">
              李斌
              &nbsp;
              <span title="副教授">副教授</span>
            </p>
            <p title="所在单位：地质工程与测绘学院">所在单位：地质工程与测绘学院</p>
            <p title="承担任务：项目负责人">承担任务：项目负责人</p>
          </div>
        </li>
        <li>
          <img src="../assets/images/sushngrui.jpg" alt />
          <div>
            <p class="t_first">
              苏生瑞
              &nbsp;
              <span title="教授">教授</span>
            </p>
            <p title="所在单位：地质工程与测绘学院">所在单位：地质工程与测绘学院</p>
            <p title="承担任务：课程建设">承担任务：课程建设</p>
          </div>
        </li>
        <li>
          <img src="../assets/images/sushngrui.jpg" alt />
          <div>
            <p class="t_first">
              邓龙胜
              &nbsp;
              <span title="副教授">副教授</span>
            </p>
            <p title="所在单位：地质工程与测绘学院">所在单位：地质工程与测绘学院</p>
            <p title="承担任务：实验教学">承担任务：实验教学</p>
          </div>
        </li>
        <li style="margin-right:0;">
          <img src="../assets/images/sushngrui.jpg" alt />
          <div>
            <p class="t_first">
              李鹏
              &nbsp;
              <span title="工程师">工程师</span>
            </p>
            <p title="所在单位：地质工程与测绘学院">所在单位：地质工程与测绘学院</p>
            <p title="承担任务：实验教学">承担任务：实验教学</p>
          </div>
        </li>
        <li>
          <img src="../assets/images/sushngrui.jpg" alt />
          <div>
            <p class="t_first">
              任超峰
              &nbsp;
              <span title="讲师">讲师</span>
            </p>
            <p title="所在单位：地质工程与测绘学院">所在单位：地质工程与测绘学院</p>
            <p title="承担任务：系统开发">承担任务：系统开发</p>
          </div>
        </li>
        <li>
          <img src="../assets/images/sushngrui.jpg" alt />
          <div>
            <p class="t_first">
              杨耘
              &nbsp;
              <span title="副教授">副教授</span>
            </p>
            <p title="所在单位：地质工程与测绘学院">所在单位：地质工程与测绘学院</p>
            <p title="承担任务：系统开发">承担任务：系统开发</p>
          </div>
        </li>
        <li>
          <img src="../assets/images/sushngrui.jpg" alt />
          <div>
            <p class="t_first">
              赵卫峰
              &nbsp;
              <span title="讲师">讲师</span>
            </p>
            <p title="所在单位：地质工程与测绘学院">所在单位：地质工程与测绘学院</p>
            <p title="承担任务：系统开发">承担任务：系统开发</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  }
};
</script>
<style lang="less" scoped>
.container {
  // padding: 0 150px;
  width: 100%;
  margin: 10px 0;
  box-sizing: border-box;
  h1 {
    width: 1123px;
    margin: 0 auto;
    height: 48px;
    line-height: 48px;
    font-size: 20px;
    font-weight: normal;
    border-bottom: 2px solid #d7d7d5;
    position: relative;
    span {
      position: absolute;
      left: 0;
      top: -2px;
      border-bottom: 2px solid #2fb7a1;
      color: #323335;
      font-weight: normal;
    }
  }
  .imgBox {
    width: 1123px;
    margin: 0 auto;
    ul {
      margin: 30px 0 60px 0;
      padding: 0;
      li {
        width: 230px;
        height: 280px;
        list-style: none;
        box-shadow: 0 0 5px #ccc;
        img {
          width: 100%;
          height: 205px;
        }
        div {
          p {
            font-size: 18px;
            font-weight: bold;
            margin: 5px 0 0 10px;
            color: #333;
            line-height: 24px;
            cursor: text;
            span {
              font-size: 14px;
              color: #999;
              font-weight: normal;
            }
          }
          .teacher_detail {
            width: 210px;
            a {
              float: right;
              font-size: 12px;
              padding: 0 4px;
              border: 1px solid #2fb7a1;
              color: #2fb7a1;
              border-radius: 9px;
              height: 20px;
              line-height: 20px;
              margin: 5px;
            }
          }
        }
      }
    }
  }

  .imgList {
    width: 1123px;
    margin: 0 auto;
    ul {
      margin: 30px 0 60px 0;
      padding: 0;
      li {
        width: 230px;
        height: 295px;
        list-style: none;
        box-shadow: 0 0 5px #ccc;
        float: left;
        margin-right: 67px;
        margin-bottom: 60px;
        img {
          width: 100%;
          height: 205px;
        }
        div {
          .t_first {
            font-size: 18px;
            font-weight: bold;
            margin: 5px 0 0 10px;
            color: #333;
            line-height: 24px;
            span {
              font-size: 12px;
              color: #999;
              font-weight: normal;
            }
          }
          p {
            margin: 5px 0 0 10px;
            font-size: 12px;
            color: #999;
            cursor: text;
          }
        }
      }
    }
  }
}
</style>